* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

@mixin colors($percent) {
    $h: calc($percent / 100 * 360);
    color: hsl($h, 100%, 75);
}
.container {
    width: 300px;
    height: 300px;
    border: 1px solid white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: changecolor 5s linear infinite;
    span {
        position: absolute;
        // width: 50px;
        // height: 50px;
        border-style: solid;
        // currentColor 代表当前元素被应用上的color颜色值，
        //如果当前元素没有的css里指定一个color
        // 那它的颜色会从父元素继承过来
        border-color: currentColor transparent;
        border-width: 10px 10px 0 0;
        border-radius: 50%;
        animation: rotating linear infinite;
        @for $i from 1 to 10 {
            &:nth-child(#{$i}) {
                $s: 20px + $i * 30px;
                width: $s;
                height: $s;
                // 计算并设置动画市场
                animation-duration: calc(5s / (10 - $i));
            }
        }
    }
}

@keyframes rotating {
    to {
        // 1turn表示一拳
        transform: rotate(1turn);
    }
}

@keyframes changecolor {
    0%,
    100% {
        @include colors(0);
    }
    10% {
        @include colors(10);
    }
    20% {
        @include colors(20);
    }
    30% {
        @include colors(30);
    }
    40% {
        @include colors(40);
    }
    50% {
        @include colors(50);
    }
    60% {
        @include colors(60);
    }
    70% {
        @include colors(70);
    }
    80% {
        @include colors(80);
    }
    90% {
        @include colors(90);
    }
}
